<template>
    <div class="page">
        <div class="top"><span>完成</span></div>
        <div class="content">
            <div class="content-top">
                <img src="@/assets/dui.png" alt="">
            </div>
            <p>支付成功</p>
            <p>￥1213123</p>
        </div>
        <div class="btns">
            <van-button plain type="danger" style="width:3.3rem;height:0.82rem;border-radius:0.1rem;">朴素按钮</van-button>
            <van-button type="danger" style="width:3.3rem;height:0.82rem;background:#F83567;border-radius:0.1rem;">危险按钮</van-button>
        </div>
        <div class="duihuan">
            <div class="duihuan-left">
                <p>积分</p>
                <p>支付成功，获得10积分</p>
            </div>
            <div class="duihuan-right">领取</div>
        </div>

    </div>
</template>
<script>
    export default {
        
    }
</script>
<style scoped>
    .top{height: 0.88rem;line-height: 0.88rem;display: flex;align-items: center;justify-content: flex-end;border-bottom: 1px solid #e6e6e6}
    .top span{font-size:0.28rem;color: #F52E67 ;padding: 0 0.3rem;}
    .content{text-align: center;padding: 1rem 0 1rem 0;}
    .content-top img{width: 1.87rem;height: 1.47rem;}
    .content p:nth-child(2){font-size: 0.3rem;}
    .content p:nth-child(3){font-size: 0.4rem; }
    .btns{padding: 0 0.3rem;display: flex;justify-content: space-between;}
    .duihuan{margin: 0 0.3rem;margin-top: 0.6rem;height: 1.5rem;background-image:url(../../assets/duihuan.png);border-radius: 0.1rem;background-size:100% 100%;display: flex;justify-content: space-between;align-items: center; }
    .duihuan-right{width: 1.42rem;height: 0.67rem;border-radius: 0.2rem;line-height: 0.67rem;text-align:center;background: #ffffff;margin-right: 0.2rem;font-size: 0.28rem;color: #4F5AE9}
    .duihuan-left{margin-left: 1.5rem;color: white;}
</style>


